<template>
	<view class="my-info">
		<view class="avatar">
			<image :src="imgArr" mode="aspectFill" style="position: relative;"></image>
			<image src="../../static/图片上传.png" mode="aspectFill"
				style="width: 60rpx;height: 60rpx;position: absolute;left: 430rpx;top: 180rpx;opacity: 0.9;"
				@click="upload()">
			</image>
		</view>
		<view class="content">
			<view class="myitem">
				<van-cell-group>

					<u-cell-item :border-bottom="border" :title-style="style" title="姓	名" :arrow="false">
						<u-input input-align="right" placeholder="姓名" slot="right-icon" v-model="info.username"
							:clearable="border" :custom-style="inputStyle"></u-input>
					</u-cell-item>

					<u-cell-item :border-bottom="border" :title-style="style" title="意向岗位" :arrow="false">
						<u-input input-align="right" placeholder="意向岗位" slot="right-icon" v-model="info.position"
							:clearable="border" :custom-style="inputStyle"></u-input>
					</u-cell-item>

					<u-cell-item :border-bottom="border" :title-style="style" title="工作经验" :arrow="false">
						<u-input input-align="right" placeholder="工作经验/年" slot="right-icon" v-model="info.workex"
							:clearable="border" :custom-style="inputStyle"></u-input>
					</u-cell-item>

					<u-cell-item :border-bottom="border" :title-style="style" title="联系电话" :arrow="false">
						<u-input input-align="right" placeholder="联系电话" slot="right-icon" v-model="info.tel"
							:clearable="border" :custom-style="inputStyle"></u-input>
					</u-cell-item>

					<u-cell-item :border-bottom="border" :title-style="style" title="所在地" @click="chooseRegion()"
						:value="info.region"></u-cell-item>

					<u-cell-item :border-bottom="border" :title-style="style" title="电子邮箱" :arrow="false">
						<u-input input-align="right" placeholder="电子邮箱" slot="right-icon" v-model="info.email"
							:clearable="border" :custom-style="inputStyle"></u-input>
					</u-cell-item>

					<u-cell-item :border-bottom="border" :title-style="style" title="性	别" @click="chooseSex()"
						:value="info.sex"></u-cell-item>

					<u-cell-item :border-bottom="border" :title-style="style" title="博	客" :arrow="false">
						<u-input input-align="right" placeholder="博客" slot="right-icon" v-model="info.blog"
							:clearable="border" :custom-style="inputStyle"></u-input>
					</u-cell-item>


				</van-cell-group>
			</view>
			<button type="default" class="mybutton" @click="next(info)">下一步</button>

		</view>

		<!-- 性别弹出选项框 -->
		<u-action-sheet border-radius="30" :list="list" v-model="sexShow" safe-area-inset-bottom="true"
			:cancel-btn="true" @click="click()"></u-action-sheet>

		<!-- 地区弹出选择框 -->
		<u-picker mode="region" v-model="regionShow" :params="regionParams" @confirm="getRegion()"
			:defaultRegion="startRegion"></u-picker>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: {
					username: "",
					position: "",
					workex: "",
					tel: "",
					email: "",
					blog: "",
					sex: "请选择",
					region: "请选择",
				},
				border: false,
				fileList: [],
				list: [{
						text: '男',
						fontSize: 32
					},
					{
						text: '女',
						fontSize: 32
					}
				],
				regionParams: {
					province: true,
					city: true,
					area: false
				},

				inputStyle: {
					'width': '400rpx',
				},
				sexShow: false,
				regionShow: false,
				imgArr: ['../../static/fish.jpg'],
				style: {
					'font-size': '26rpx',
					'font-weight': 'bold'
				},
				startRegion: ['广东省', '广州市'],
			}
		},
		methods: {
			next() {
				// uniCloud.callFunction({
				// 		name: "basicInfo",
				// 		data: {
				// 			username: this.info.username,
				// 			position: this.info.position,
				// 			workex: this.info.workex,
				// 			tel: this.info.tel,
				// 			email: this.info.email,
				// 			blog: this.info.blog,
				// 			sex: this.info.sex,
				// 			region: this.info.region,
				// 		},
				// 		success: (res) => {
				// 			console.log(res);
				// 		},
				// 		fail: (err) => {
				// 			console.log(err);
				// 		}
				// 	})
				// uni.$emit('update', {
				// 	msg: this.info
				// })
				uni.setStorage({
					key:'basic-info',
					data:this.info,
					success() {
						console.log("存储成功")
						uni.navigateTo({
							url: `../education-info/education-info`
						})
					}
				})
				
			},
			chooseSex() {
				this.sexShow = true
			},

			getRegion(e) {
				console.log(e)
				if (e.city.label == "市辖区" || e.city.label == "县") {
					this.info.region = e.province.label
					this.startRegion = [e.province.label, e.city.label]
				} else {
					this.info.region = e.city.label
					this.startRegion = [e.province.label, e.city.label]
				}
			},
			chooseRegion() {
				this.regionShow = true
			},

			click(index) {
				this.info.sex = this.list[index].text
			},

			upload() {
				uni.chooseImage({
					count: 1,
					success: res => {
						this.imgArr = res.tempFilePaths
						console.log(this.imgArr)
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.my-info {
		background: rgba(224, 226, 252, 0.6);
		min-height: 100vh;
		height: auto;
		padding-bottom: 30rpx;
	}

	.inputStyle {
		width: 100%;
		background-color: red;
	}

	.avatar {
		height: 300rpx;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.content {
		margin: 40rpx 30rpx 0;
	}

	.avatar>image {
		width: 200rpx;
		height: 200rpx;
		border-radius: 100rpx;
	}

	.myitem {
		background-color: #ffffff;
		width: 100%;
		padding: 18rpx 0;
		border-radius: 20rpx;
		box-sizing: border-box;
		box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);
		margin-bottom: 40rpx;
		background-size: 100% 100%;
	}

	.mybutton {
		background-color: #ffffff;
		width: 100%;
		height: 90rpx;
		font-size: 27rpx;
		color: #928cd6;
		border-radius: 20rpx;
		box-sizing: border-box;
		box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);
		margin-bottom: 20rpx;
		line-height: 96rpx;
	}

	.myinput {
		background-color: #ffffff;
		width: 80%;
		height: 120rpx;
		font-size: 30rpx;
		font-weight: bold;
		color: #928cd6;
		border-radius: 40rpx;
		box-sizing: border-box;
		margin: 50rpx auto;
		box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);
		margin-bottom: 20rpx;
		line-height: 96rpx;
	}

	.mybuttonb {
		background-color: #ffffff;
		width: 100%;
		height: 90rpx;
		font-size: 27rpx;
		color: #c65c69;
		border-radius: 20rpx;
		box-sizing: border-box;
		box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);
		margin-bottom: 20rpx;
		line-height: 96rpx;
	}
</style>
